<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <title>FileUpLoad</title>
</head>
<body>
<button type="button" class="layui-btn" id="uploadfile">
    <i class="layui-icon">&#xe67c;</i>上传
</button>
<div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="upload_progress_bar" lay-percent="0%">
    <div id="upload_progress" class="layui-progress-bar"></div>
</div>
</body>
<script>
    layui.use(['upload', 'element'], function () {
        var t;
        var webSockets = [];
        layui.upload.render({
            elem: '#uploadfile'
            , url: 'uploadPhoto'
            , accept: 'file'
            // ,multiple:true
            , done: function (res, index, upload) {
                // clearInterval(t);
                layui.element.progress('upload_progress_bar', '100%');
                $("#uploadfile").removeClass("layui-btn-disabled");
                for (var i = 0; i < webSockets.length; i++) {
                    console.log(webSockets[i])
                    webSockets[i].close();
                }
                webSockets = [];
            },
            before: function (arg) {
                arg.preview(function (index, file, result) {
                    // console.log(file)
                    layui.element.progress('upload_progress_bar', '0%');
                    $("#uploadfile").addClass("layui-btn-disabled");
                    // t = setInterval(function () {
                    //     $.ajax({
                    //         url: "fileuploadstatis",
                    //         data: {filename: file.name},
                    //         complete: function (arg) {
                    //             if (arg.responseText && arg.responseText.indexOf("null") < 0) {
                    //                 let obj = JSON.parse(arg.responseText);
                    //                 console.log(obj.percent);
                    //                 layui.element.progress('upload_progress_bar', obj.percent + "%");
                    //             }
                    //         }
                    //     })
                    // }, 100);
                    if ("WebSocket" in window) {
                        var contextPath = document.location.pathname;
                        var index = contextPath.substr(1).indexOf("/");
                        contextPath = contextPath.substr(0, index + 1);
                        if (document.location.port) {
                            var url = "ws://" + window.location.host + ":" + document.location.port + contextPath + "/ws/fileUploadState";
                        } else {
                            var url = "ws://" + window.location.host + contextPath + "/ws/fileUploadState";
                        }
                        var ws = new WebSocket(url);
                        ws.onopen = function () {
                            ws.send(file.name);
                        }
                        ws.onmessage = function (arg) {
                            let obj = JSON.parse(arg.data);
                            console.log(obj.percent)
                            layui.element.progress('upload_progress_bar', obj.percent + "%");
                        };
                        ws.onclose = function () {
                            console.log("连接已关闭...");
                        };
                        window.onbeforeunload = function () {
                            ws.close();
                        }
                        webSockets.push(ws);
                    }
                })
            }
        });
    });
</script>
</html>